<template>
    <div class="container">
        <div class="wrapper">
            <div class="imgDiv">
                <img src="../assets/login.jpg" alt="" >
            </div>
            <div  class="login-wrapper">
                <el-form :model="user" :rules="rules" ref="loginRef">
                    <div  class="title">欢迎登录开源数据分析系统</div>
                    <el-form-item prop="username">
                        <el-input prefix-icon="el-icon-user" placeholder="请输入用户名" size="medium" v-model="user.username" clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" size="medium" v-model="user.password" clearable show-password></el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <div  class="code-wrapper">
                            <el-input prefix-icon="el-icon-circle-check" size="medium" v-model="user.code" placeholder="请输入验证码"></el-input>
                            <div  class="validcode">
                                <ValidCode @update:value="getCode"/>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="login" type="primary">登录</el-button>
                    </el-form-item>
                    <div  class="register">
                        <div class="register-link">
                            还没有账号？请<span  @click="$router.push('/register')">注册</span>
                        </div>
                    <div  @click="handleForgetPass" class="forgetPass">忘记密码？
                    </div>
                    </div>
                </el-form>
            </div>
        </div>
        <el-dialog title="忘记密码" :visible.sync="forgetPassFormVis" width="80%" >
            <el-form :model="forgetForm" label-width="80px" style="padding-right:20px;">
                <el-form-item label="用户名">
                    <el-input v-model="forgetForm.username" autocomplete="off" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" >
                <el-input v-model="forgetForm.email" autocomplete="off" placeholder="请输入邮箱"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
            <el-button @click="forgetPassFormVis = false">取 消</el-button>
            <el-button type="primary" @click="resetPassword">确 定</el-button>
             </div>
        </el-dialog>
    </div>
</template>

<script>
import ValidCode from '@/components/ValidCode.vue';
    export default {
        name:'Login',
        components:{
            ValidCode
        },
        data(){
            const validateCode=(rule,value,callback)=>{
                if(value === ''){
            callback(new Error('请输入验证码'))

                }else if(value.trim().toLocaleLowerCase()!==this.realCode.trim().toLocaleLowerCase()){
                    callback(new Error('验证码错误'))
                }
                callback()
            }
            return{
                user:{
                    username:'',
                    password:'',
                    code:''
                },
                realCode:'',
                rules:{
                    username:[{required:true,message:'请输入用户名',trigger:'blur'}],
                    password:[{required:true,message:'请输入密码',trigger:'blur'}],
                    code:[{validator:validateCode,trigger:'blur'}]
                },
                forgetPassFormVis:false,
                forgetForm:{}
            }
        },
        methods:{
            getCode(code){
                this.realCode=code
            },
            login(){
                this.$refs['loginRef'].validate((valid)=>{
                    if(valid){
                        this.$request.post('/api/auth/login',this.user).then(res=>{
                            if(res.status === 200){
                                this.$router.push("/")
                                this.$message.success("登录成功")
                                localStorage.setItem('user-data',JSON.stringify(res.token))
                                localStorage.setItem('username',JSON.stringify(res.data.username))
                            }else{
                                this.$message.error('用户名或密码错误')
                                // this.forgetPassFormVis=false
                                
                            }
                        }).catch((e)=>{
                            this.$message.error(e)
                            // this.$message.error('用户名或密码错误')
                        })
                    }
                })
            },
            resetPassword(){
            this.$request.post('/api/auth/forgot-password',this.forgetForm).then(res=>{
            if(res.status === 200){
                this.$message.success('重置密码成功')
                this.forgetPassFormVis=false
            }else{
                this.$message.error(res.msg)
                    }
                }).catch(()=>{
                    this.$message.error('用户名或邮箱错误，重置密码失败')
                })
            },
            handleForgetPass(){
                this.forgetForm={}
                this.forgetPassFormVis=true
            }
        }
    }
</script>

<style scoped>
.container{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: cadetblue;
}
.wrapper{
    display: flex;
    background-color: white;
    width:80%;
    height:60%;
    border-radius: 5px;
    overflow: hidden;
}
.imgDiv{
    flex:1;
    @media screen and (max-width:820px) {
        display: none;
    }

}
.imgDiv img{
    max-width: 100%;
    height: 100%;
    /* @media screen and (max-width:768px) {
        display: none;
    } */

}
.login-wrapper{
    flex:1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-wrapper form{
    width:80%;
}
.title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;   
}
.code-wrapper{
    display: flex;
}
.code-wrapper input{
    flex:1;

}
.validcode{
    flex:1;
    background-color: rgba(95, 158, 160,.2);
    height: 36px; 
}
.el-form-item__content button{
    width:100%;
}
.el-input{
    height: 40px;
}
.register{
    display:flex ; 
    justify-content: space-between;
}
.forgetPass{
    color:green;
    cursor: pointer;
    flex:1;
    text-align: right;
}
.register-link{
    flex:1;
}
.register-link span{
    color: blue; 
    cursor:pointer;
}

</style>